Foreword
Just to get into micro-channel applet when everything is based on micro-letter web developer tools, do not use other frameworks, there is no concept of the project. Then do the project are relatively simple, just use the micro-letter web developer tool is pretty handy. After learning something, you'll be tempted to think outside the native tools outside the box, to learn things these days have come to a boil boil.
Existing project uses a small program that uses webpack on github, babel, sass develop small programs scaffolding (wxapp-boilerplate), I do not need to change the basis of the original project code based on the use of the project to reconstruct gulp flow.
Experience: vscode use with a variety of plug-in src directory under development, the use of micro-channel web developer tools to debug preview, open service by cmd, you can quickly create a page with a gulp command, component template. Still very nice.
Introduction
According just need pain points and development, and ultimately do the following work, have achieved is not in place, and we welcome suggestions.
sass compiled into wxss, at the same time deal with the @import leads directly into a single file is too big problem
Modify gulpfile.js of aliasWords configurable alias for the project js
Src in support of wxs use es6 +
Using micro-channel web developers build tools Npm
gulp command to quickly create a page, component template
Project Address: https://github.com/bluehat999/weapp-gulp
Article Address: https://www.cnblogs.com/mthz/p/weapp-gulp.html
Points
Implementation issues encountered in the process, but also some key points:
1. The project WXS file using the ES6 syntax, but does not support native WXS ES6
wxs syntax is not supported ES6, ES5 standard basic reference standard.
The solution is to use the babel wxs like js as from ES6 into ES5, when using babel, there is always a module does not load, identify the problems should be babel inter-dependent versioning issues, he checked on GitHub GULP-babel warehouse referring to the example readme.md reinstall module and use it successfully resolved.
installation:
npm install --save-dev gulp-babel @babel/core @babel/preset-envuse:
const f_wxs = done => {
return gulp.src(WXS, { since: gulp.lastRun(f_wxs) })
.pipe(plumber({ errorHandler: onError }))
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rename({extname:'.wxs'}))
.pipe(gulp.dest(DIST))
}
gulp.task('wxs', f_wxs)2.sass compiled into wxss, solve @import cause the file size is too big problem
css syntax does not support the import, sass will be added directly to the corresponding file in dealing with @import over, resulting in wxss file size is too large.
The wxss support import syntax, while limiting single package code does not exceed 2M, it is necessary to adopt methods to avoid direct import styles sass compile time, but follow @import. Simply put, do not deal with the import statement when compiled let sass.
Sass source code can be changed, it skips import, files can also import statements commented out in front of sass to compile, compile canceled after the end of the comment.
But it does not deal with the import statement will also have a problem: when the file was used to introduce variables in the file and mixin, will not find the absence of the introduction of variables and mixin. We need to deal with the import statement does not give a judgment plus condition.
General project will be global (to be quoted) and mixin variable in a separate file, and will be divided into more appropriate, in order to avoid a single file is too large. These files in the specified directory, the directory path as a judgment condition to filter out the need to import mixin variable and the sass file.
const SRC = './src/**/'
const SASS = [`${SRC}*.{scss,wxss,scss}`]
const DIRECTIMPORT = [`styles`, `font`]
const f_sass = done => {
return gulp.src([...SASS,...DIRECTIMPORT.map(item => `!${SRC}${item}/**/*`)],
{ since: gulp.lastRun(f_sass) ,allowEmpty:true})
.pipe(plumber({ errorHandler: onError }))
.pipe(tap((file) => {
const filePath = path.dirname(file.path);
file.contents = new Buffer(
String(file.contents)
.replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => {
const imPath = path.resolve(filePath + '/' + $2)
return DIRECTIMPORT.some( item => { return imPath.indexOf(item) > -1} ) ? $1 : `/** ${$1} **/`
})
)
}))
.pipe(sass())
.pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => $3.replace(/\.scss/g, '.wxss')))
.pipe(rename({ extname: '.wxss' }))
.pipe(gulp.dest(DIST))
}
gulp.task('sass', f_sass)3. The micro-channel uses small npm
Applet version 2.2.1 above base libraries began to support npm install third-party packages. Official Documents
Carefully read the documentation, and sample code it, but still in the tank for a while.
node_modules applet must be placed in the root directory or subdirectories, npm of package.json also, otherwise dist will be prompted to find npm npm built when the micro-letter web developer tools.
Npm build its source map file will generate the same level in the code directory, easy to do a reverse debugging.
But npm command is required to use in the dist directory level, if placed directly on the dist, the upper level will not take, would have been the ideal solution is to put dist, modify npm find places node_modules file, or on previous level, modify developers build tools to find files when node_modules place.
But I really have not found how to modify the source code can perhaps see, so using too much trouble solution. Node_modules is on the level, it will write a gulp task to copy the whole dist. node_modules After getting bigger, to use a copy of the last 10 seconds, big spending, but only you need to synchronize node_modules updated look, in general also okay.
4. When using gulp-tap file name acquisition process and calculates a relative path
(Such as when the file referenced in the config and utils directory) of the original project to manage files using webpack rely, instead gulp, then some of the original path dependence is wrong, if directly modify the code, and the project will be original programming practice conflict, so it decided to build directly when gulp the wrong path to the correct relative path.
The micro-channel error applet used lodash
Uncaught TypeError: Cannot read property 'prototype' of undefinedFind a good article that explains the article
According to the program given in the article, after building Npm in developer tools can be used gulp lodash automatically modify the appropriate file to fix the problem.
6. The micro-channel applet does not support async / await grammar
Because of the small program supports ES6 turn ES5, I do not use babel in gulp, the program did not take into account the small of the above ES6 is not supported.
Small program called the appeal mistake, I first checked the wrong regeneratorRuntime is not defined, generally that is asynchronous error, find the error code and found that the use of the async await, speculation is micro-channel applet does not support the need to introduce appropriate package, and then google to better answer.
From facebook code repository is downloaded to the corresponding source code (just runtime.js on it), put utils, the introduction in place of using async. But I encountered the following problems:
Source code error location in the catch, the document neither introduced nor define this Function, the Internet can not find the answer, consider the catch, it should be treated like an error, comment out too little effect, I put it is commented out.
More improvements
There will be improved, and if you feel okay or not, take the trouble to look at my blog and github.
Project Address: https://github.com/bluehat999/weapp-gulp
Article Address: https://www.cnblogs.com/mthz/p/weapp-gulp.html