-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
编写新的mina-entry-webpack-plugin,使其支持引入原生小程序组件的能力 #25
Conversation
Travis tests have failedHey @run27017, Node.js: 8lerna run test
Node.js: 6lerna run test
|
提交了新的内容,针对以上的测试不过的问题。 |
Hey @run27017, |
看来是我之前想得不够全面。 关于第一点,确实是的,node_modules的目录在小程序里面会失效。这个看来得另想解决办法,因为我假定的file-loader配置是 第二点,你说得还是很中肯的,我先去看看相关的约定。 嗯,本次的pull request只是个尝试,我会在近期对其做完善。 |
1. 只对`~`开头的路径解析node_modules 2. 解析node_modules的时候,参考package.json的main属性 3. 等等
Hey @run27017, |
啊哈,我提交了新的commits。新的commits先不纠结形而上的东西了,主要是把功能完善,而且是尽可能地适配到现有的mina-loader。
现在唯一需要注意的地方,就是引入组件的时候必须带上后缀名。但是插件本身是不带后缀名也可以正常生成entry的,mina-loader只需要后续补充支持它就可以了。 示例项目仍然是examples/mina-entry-app-demo,针对_node_modules_的问题,增加了一个loaders/change-path-loader,放在file-loader前面做适配。 |
Hey @run27017, |
进展如何?需要我帮助的地方吗? |
@run27017 实在抱歉,目前在处理其他分支,还没来得及 review,接下来会优先处理。 |
@imyelo ok,收到。未来的进展是如何计划的,是直接合还是调整mina-loader后再一起合? |
@run27017 这个 PR 由于是新开目录,所有文件都是 added 状态,不好比对合并,所以我参考你的实现在主分支的基础上重新起了一个 PR #40 ,希望不会介意 😊。 #40 的实现细节:
|
@imyelo 好的!最新的版本是多少?脚手架 |
但因为近期更新比较多,所以模板还没来得及一起更新;可以在旧项目中将这几个包的版本号暂时锁定在
另外最新 prerelase 的版本依赖 webpack 4,所以可能也需要升级一下 webpack 以及 |
这个最后有合并到 master 吗?我 3 月初新建的项目,好像还是不能引入原生组件诶~ |
@baranwang 合并了 #40 。你项目内 mina-loader 和 mina-entry-webpack-plugin 的版本号是? |
mina-loader: 1.5.0 是需要在 |
不需要的,有报异常吗?看起来已经是最新的版本,这里有个 示例。 |
我的 const { resolve } = require('path')
const webpack = require('webpack')
const MinaEntryPlugin = require('@tinajs/mina-entry-webpack-plugin')
const MinaRuntimePlugin = require('@tinajs/mina-runtime-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
const loaders = {
script: 'babel-loader',
style: {
loader: 'postcss-loader',
options: {
config: {
path: resolve('./postcss.config.js'),
},
},
},
}
module.exports = {
context: resolve('src'),
entry: './app.mina',
output: {
path: resolve('dist'),
filename: '[name]',
publicPath: '/',
globalObject: 'wx',
},
module: {
rules: [
{
test: /\.mina$/,
exclude: /node_modules/,
use: [
{
loader: '@tinajs/mina-loader',
options: {
loaders,
languages: {
less: [
'postcss-loader',
{
loader: 'less-loader',
options: {
compress: true,
},
},
{
loader: 'style-resources-loader',
options: {
patterns: [resolve('src/_var.less')],
},
},
],
},
},
},
],
},
{
test: /\.mina$/,
include: /node_modules/,
use: '@tinajs/mina-loader',
},
{
test: /\.js$/,
exclude: [/node_modules/, resolve('src/utils/ald')],
use: loaders.script,
},
{
test: /\.(css|wxss)$/,
exclude: /node_modules/,
use: loaders.style,
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'assets/[name].[hash:6].[ext]',
},
},
},
{
test: /\.wxs$/,
use: {
loader: '@tinajs/wxs-loader',
options: {
name: 'wxs/[name].[hash:6].[ext]',
},
},
},
{
test: /\.wxml$/,
use: [
{
loader: 'relative-file-loader',
options: {
name: 'wxml/[name].[hash:6].[ext]',
},
},
{
loader: '@tinajs/wxml-loader',
options: {
raw: true,
enforceRelativePath: true,
root: resolve('src'),
},
},
],
},
],
},
resolve: {
symlinks: true,
alias: {
'@': resolve('src'),
},
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
DEBUG: false,
}),
new webpack.DefinePlugin({
isProduction,
API_URL: JSON.stringify('https://'),
ASSET_URL: JSON.stringify('https://'),
}),
new MinaEntryPlugin({
map: entry => ['es6-promise/dist/es6-promise.auto.js', entry],
}),
new MinaRuntimePlugin(),
new CopyPlugin([
{ from: resolve('src/ext.json'), to: resolve('dist/ext.json') },
]),
],
optimization: {
splitChunks: {
chunks: 'all',
name: 'common.js',
minChunks: 2,
minSize: 0,
},
runtimeChunk: {
name: 'runtime.js',
},
},
mode: isProduction ? 'production' : 'none',
} |
@baranwang 引用 |
<config>
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"usingComponents": {
// ...
"slide-view": "~miniprogram-slide-view",
}
}
</config> |
可能是因为 "usingComponents": {
// ...
- "slide-view": "~miniprogram-slide-view",
+ "slide-view": "~miniprogram-slide-view/miniprogram_dist/index",
}
} |
OK 啦~ 太感谢啦~ |
新的mina-entry-webpack-plugin在packages/new-mina-entry-webpack-plugin下面,其样例app在examples/mina-entry-app-demo下面。新的插件可以支持引入原生小程序组件(.js, .json, .wxml, .wxss),具体内容可参考packages/new-mina-entry-webpack-plugin/README.md.
关于package.json中的author、license、keywords等可以修改,我没有意见。只希望能够尽快集成,投入到生产使用。
望多多交流,非常感谢!